<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>

<body>
    <p>Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。</p>
    <p>所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。</p>
    <p>在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数</p>
    <p>结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。</p>
    <p>如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数， 使用可选的 JSX 语法。</p>
    <hr>
    <div id="app">
        {{message}}
        <span v-once>
            <br>在v-once声明的值，不会改变：{{message}}=====效果类似：Object.freeze(对象)
        </span>
    </div>
</body>
<script>
    let vm = new Vue({
        el: app,
        data: {
            message: "这是在vm实例中声明的变量值"
        }
    });
    vm.message = "这是在vm实例后，修改的属性值"
</script>

</html>